<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <title>3d女友相册</title>
  
</head>
<body>
  <!-- <audio autoplay="autopaly" id="audio"  canplay="canplay">
    <source src="./audio/music_1.mp3" id="source"  type="audio/mp3" />
  </audio> -->
  <!-- autoplay="autoplay" -->
  <!-- 
    添加了自动播放-autoplay。在谷歌浏览器中是不会自动播放的
    最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频
    在其他浏览器(qq等浏览器中)是可以自动播放的
    
    如果想在谷歌浏览器中做自动播放，调用元素的play()方法也是不行的。必须用户与页面交互(用户点击了/滑动了 页面等等)，再调用 play()函数就可以播放

    video视频元素不能自动播放视频，但是设置了  video标签设置muted属性 使它静音，这样视频就能自动播放了，但是没有声音
    然后待用户在网页上有了任意触发后，再将muted去掉，或者让用户手动去打开音频（腾讯视频就是这样做的）
  -->
  <audio id="audio" autoplay="autoplay" loop controls preload  src="./audio/music_1.mp3" hidden="true"></audio>

  <!-- 推荐 01-06:100×100  1-6:200×200 -->
  <div id="cube">
    <ul>
      <li>
        <img src="images/1.jpg" >
      </li>
      <li>
        <img src="images/2.jpg" >
      </li>
      <li>
        <img src="images/3.jpg" >
      </li>
      <li>
        <img src="images/4.jpg" >
      </li>
      <li>
        <img src="images/5.jpg" >
      </li>
      <li>
        <img src="images/6.jpg" >
      </li>
    </ul>
    <!-- <ol>
      <li>
        <img src="images/01.jpg" >
      </li>
      <li>
        <img src="images/02.jpg" >
      </li>
      <li>
        <img src="images/03.jpg" >
      </li>
      <li>
        <img src="images/04.jpg" >
      </li>
      <li>
        <img src="images/05.jpg" >
      </li>
      <li>
        <img src="images/06.jpg" >
      </li>
    </ol> -->
  </div>
  
</body>

<script >
  window.onload = function () {
    console.log('页面加载完毕');
    // document.getElementById('source').play()
    console.log(document.getElementById('audio'))

    // （在promise中）DOMException:play（）失败，因为用户没有首先与文档交互
    function toggleSound () {
      let music = document.getElementById("audio");
      setTimeout(() => {
        music.play(); //没有就播放 
      }, 2000)
       
    }
    toggleSound()
  }

</script>
</html>